import React, {Fragment, useCallback, useMemo, useState} from 'react';

import "@/css/workflow.less"
import "./index.less"
import {Button, Dropdown, MenuProps, Space} from "antd";
import {
    EllipsisOutlined,
    ExportOutlined,
    ImportOutlined,
    MobileOutlined,
    QuestionCircleOutlined,
    SaveOutlined,
    SendOutlined
} from "@ant-design/icons";
import {NavTabs} from "@/pages/WorkFlowDesigner/Toolbar/NavTabs";

export default React.memo(() => {
    const [selectedTab, setSelectedTab] = useState<string>("flowDesign")

    const handleNavChange = useCallback((key: string) => {
        setSelectedTab(key)
    }, [])

    const items: MenuProps['items'] = useMemo(() => [
        {
            // 导入功能
            label: "导入",
            key: 'import',
            icon: <ImportOutlined/>,
            // onClick: importJson,
        },
        {
            // 导出功能
            label: "导出",
            key: 'export',
            icon: <ExportOutlined/>,
            // onClick: exportJson,
        },
    ], []);

    return (
        <Fragment>
            <div className="toolbox-container row-flex-container space-between">
                {/*左*/}
                {/*<div>流程审批</div>*/}
                {/*中*/}
                <div className="nav-item">
                    <NavTabs
                        options={
                            [
                                {
                                    key: "baseSettings",
                                    label: "基础设置",
                                },
                                {
                                    key: "formDesign",
                                    label: "表单设计",
                                },
                                {
                                    key: "flowDesign",
                                    label: "流程设计",
                                },
                                {
                                    key: "advancedSettings",
                                    label: "高级设计",
                                },
                            ]
                        }
                        value={selectedTab}
                        onChange={handleNavChange}
                    />
                </div>
                {/*右*/}
                <div>
                    <Space>
                        <Button type="text" icon={<QuestionCircleOutlined/>}>帮助</Button>
                        <Button type="text" icon={<MobileOutlined/>}>预览</Button>
                        <Button type="text" icon={<SaveOutlined/>}>保存</Button>
                        <Button type="primary" icon={<SendOutlined/>}>发布</Button>
                        {/*<PublishButton />*/}
                        <Dropdown menu={{items}} trigger={['click']}>
                            <Button icon={<EllipsisOutlined/>}/>
                        </Dropdown>
                    </Space>
                </div>
            </div>
        </Fragment>
    )
})
